<div class="devui-star-container" (mouseleave)="hoverToggle($event, chooseValue, true)">
  <div
    *ngFor="let item of totalLevel_array; let i = index"
    class="devui-star-align devui-pointer"
    [ngClass]="{ 'devui-only-read': read }"
    (mouseover)="hoverToggle($event, i)"
    (click)="selectValue(i)"
  >
    <span class="devui-star-color {{ icon }}">
      {{ character }}
      <svg
        *ngIf="!icon && !character"
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g fill="#E3E5E9" id="Mask">
            <polygon
              points="8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912"
            ></polygon>
          </g>
        </g>
      </svg>
    </span>
    <span
      class="devui-star-color-active devui-active-star devui-star-color-{{ type }} {{ icon }}"
      [style.color]="color"
      [style.width]="item.width"
    >
      {{ character }}
      <svg
        *ngIf="!icon && !character"
        width="16px"
        height="16px"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g [style.fill]="color" id="Mask">
            <polygon
              points="8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977 12.1847656 9.71994835 12.3262379 14.3147912"
            ></polygon>
          </g>
        </g>
      </svg>
    </span>
  </div>
  <div style="clear: both"></div>
</div>
